Skip to content

perf: replace img tags with next/image where applicable#3016

Open
Yash-Chhipa wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
Yash-Chhipa:replace-img-with-next-image
Open

perf: replace img tags with next/image where applicable#3016
Yash-Chhipa wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
Yash-Chhipa:replace-img-with-next-image

Conversation

@Yash-Chhipa

@Yash-Chhipa Yash-Chhipa commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR replaces standard HTML <img> tags with Next.js Image components in places where image optimization is applicable.

The change improves image loading performance, reduces bandwidth usage, and resolves the @next/next/no-img-element lint warnings raised by ESLint.

Closes #3002

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that changes existing behavior)
  • 📝 Documentation update
  • ♻️ Refactor / code cleanup (no functional change)
  • ⚡ Performance improvement
  • 🔒 Security fix
  • 🧪 Tests only

What Changed

  • Replaced <img> with next/image in src/app/settings/page.tsx
  • Replaced <img> with next/image in src/app/dashboard/settings/page.tsx
  • Replaced <img> with next/image in src/components/ProfileCard.tsx
  • Replaced <img> with next/image in src/components/SponsorAnalytics.tsx
  • Kept src/app/api/og/user/route.tsx unchanged because the Open Graph image generation endpoint uses JSX rendered by ImageResponse, where standard <img> usage remains appropriate.

How to Test

  1. Run pnpm install
  2. Run pnpm dev
  3. Navigate to the affected pages and verify avatars and profile images render correctly.
  4. Run pnpm lint

Expected result:

  • Images render correctly without layout issues.
  • Lint warnings related to @next/next/no-img-element are resolved for the updated files.
  • No existing functionality is affected.

Checklist

  • Linked the related issue above
  • Self-reviewed my own diff
  • No unnecessary console.log, debug code, or commented-out blocks
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Added or updated tests where applicable
  • Updated documentation / comments if behavior changed

Accessibility (UI changes only)

  • Keyboard navigation works correctly
  • Color contrast meets WCAG AA standard
  • ARIA labels / roles added where needed
  • Tested on mobile / responsive layout

Additional Context

This change addresses image optimization warnings generated by the Next.js ESLint rule @next/next/no-img-element and aligns the codebase with Next.js image optimization best practices.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:performance GSSoC type bonus: performance (+15 pts) type:bug GSSoC type bonus: bug fix type:feature GSSoC type bonus: new feature type:design GSSoC type bonus: UI/design (+10 pts) labels Jul 2, 2026
@github-actions

github-actions Bot commented Jul 2, 2026

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@Priyanshu-byte-coder

Priyanshu-byte-coder commented Jul 3, 2026

Copy link
Copy Markdown
Owner

github.com isn't in next.config.mjs remotePatterns, so the GitHubAvatar in src/app/settings/page.tsx will fail at runtime once served through next/image. Add the pattern (or unoptimized), and drop the unused next/image import added to api/og/user/route.tsx.

@Yash-Chhipa

Yash-Chhipa commented Jul 4, 2026

Copy link
Copy Markdown
Contributor Author

Hey @Priyanshu-byte-coder, Thanks for the review! I've addressed the feedback:

  • Updated the GitHub avatar usage to use the unoptimized prop with next/image to avoid runtime issues related to external image optimization.
  • Removed the unused next/image import from src/app/api/og/user/route.tsx.
  • Re-ran lint checks to verify everything passes successfully.

Please let me know if there are any further changes required.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Priyanshu-byte-coder Priyanshu-byte-coder Awaiting requested review from Priyanshu-byte-coder Priyanshu-byte-coder is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@Yash-Chhipa Yash-Chhipa

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FEAT] Consider replacing <img> with next/image for improved performance

2 participants

@Yash-Chhipa @Priyanshu-byte-coder